<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建打卡计划</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4F46E5',
                        secondary: '#6366F1'
                    },
                    borderRadius: {
                        'none': '0px',
                        'sm': '2px',
                        DEFAULT: '4px',
                        'md': '8px',
                        'lg': '12px',
                        'xl': '16px',
                        '2xl': '20px',
                        '3xl': '24px',
                        'full': '9999px',
                        'button': '4px'
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gray-50">
<div class="w-[375px] min-h-[762px] mx-auto bg-white relative pb-[80px]">
    <nav class="fixed top-0 w-full bg-white border-b border-gray-100 z-50">
        <div class="h-[56px] px-4 flex items-center justify-between">
            <button onclick="window.location.href='d:\\ideaItem\\myDome\\sign-web\\plan\\ui原型\\plans.html'"
                    class="w-[24px] h-[24px] flex items-center justify-center">
                <i class="fas fa-arrow-left text-gray-700"></i>
            </button>
            <span class="text-[16px] font-medium text-gray-900">创建打卡计划</span>
            <button onclick="window.location.href='d:\\ideaItem\\myDome\\sign-web\\plan\\ui原型\\plans.html'"
                    class="w-[24px] h-[24px] flex items-center justify-center">
                <i class="fas fa-times text-gray-700"></i>
            </button>
        </div>
    </nav>
    <div class="mt-[72px] px-4">
        <div class="mb-6">
            <label class="block text-sm font-medium text-gray-700 mb-2">计划名称</label>
            <input type="text" class="w-full h-[44px] px-4 border border-gray-200 !rounded-button focus:outline-none focus:border-primary" placeholder="请输入计划名称">
        </div>
        <div class="mb-6">
            <label class="block text-sm font-medium text-gray-700 mb-2">打卡选型</label>
            <div class="grid grid-cols-2 gap-3">
                <button class="h-[44px] border border-primary bg-primary bg-opacity-5 text-primary !rounded-button flex items-center justify-center">
                    <i class="fas fa-calendar-day mr-2"></i>
                    <span>当日打卡</span>
                </button>
                <button class="h-[44px] border border-gray-200 !rounded-button flex items-center justify-center">
                    <i class="fas fa-calendar-check mr-2"></i>
                    <span>次日打卡</span>
                </button>
            </div>
            <p class="mt-2 text-xs text-gray-500">当日打卡：今日完成今日任务</p>
        </div>
        <div class="mb-6">
            <label class="block text-sm font-medium text-gray-700 mb-2">打卡类型</label>
            <div class="grid grid-cols-3 gap-3">
                <button class="h-[80px] border border-primary bg-primary bg-opacity-5 text-primary !rounded-button flex flex-col items-center justify-center">
                    <i class="fas fa-calendar text-lg mb-2"></i>
                    <span class="text-sm">天打卡</span>
                </button>
                <button class="h-[80px] border border-gray-200 !rounded-button flex flex-col items-center justify-center">
                    <i class="fas fa-check-double text-lg mb-2"></i>
                    <span class="text-sm">次打卡</span>
                </button>
                <button class="h-[80px] border border-gray-200 !rounded-button flex flex-col items-center justify-center">
                    <i class="fas fa-chart-line text-lg mb-2"></i>
                    <span class="text-sm">数量打卡</span>
                </button>
            </div>
        </div>
        <div class="mb-6">
            <label class="block text-sm font-medium text-gray-700 mb-2">计划周期</label>
            <div class="flex items-center space-x-4">
                <div class="flex-1">
                    <input type="date" class="w-full h-[44px] px-4 border border-gray-200 !rounded-button">
                </div>
                <span class="text-gray-400">至</span>
                <div class="flex-1">
                    <input type="date" class="w-full h-[44px] px-4 border border-gray-200 !rounded-button">
                </div>
            </div>
        </div>
        <div class="mb-6">
            <div class="flex items-center justify-between">
                <label class="text-sm font-medium text-gray-700">提醒设置</label>
                <label class="relative inline-flex items-center cursor-pointer">
                    <input type="checkbox" class="sr-only peer">
                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none !rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:!rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
                </label>
            </div>
            <div class="mt-3">
                <input type="time" class="w-full h-[44px] px-4 border border-gray-200 !rounded-button" value="09:00">
            </div>
        </div>
        <div class="mb-6">
            <div class="flex items-center justify-between">
                <label class="text-sm font-medium text-gray-700">强制上传照片</label>
                <label class="relative inline-flex items-center cursor-pointer">
                    <input type="checkbox" class="sr-only peer">
                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none !rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:!rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
                </label>
            </div>
            <p class="mt-2 text-xs text-gray-500">开启后打卡必须上传照片才能完成</p>
        </div>
    </div>
    <div class="fixed bottom-0 left-0 w-full bg-white border-t border-gray-100 p-4">
        <button onclick="submitPlanForm()" 
                class="w-full h-[44px] bg-primary text-white font-medium !rounded-button">
            创建计划
        </button>
    </div>
</div>
</body>
</html>
<script>
    document.querySelector('form').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const name = document.querySelector('input[type="text"]').value;
        const type = document.querySelector('select:first-of-type').value;
        // ... 其他表单数据
        
        // 这里应该调用API创建计划
        alert('计划创建成功！');
        // 跳转到新创建的计划详情页
        window.location.href = `plan-detail.html?id=new`;
    });
</script>

<script>
    function submitPlanForm() {
        const name = document.querySelector('input[type="text"]').value;
        if (!name) {
            alert('请输入计划名称');
            return;
        }

        // 模拟创建计划成功后跳转
        const newPlanId = Math.floor(Math.random() * 1000);
        window.location.href = `d:\\ideaItem\\myDome\\sign-web\\plan\\ui原型\\plan-detail.html?id=${newPlanId}`;
    }
</script>
